<template>
	<view>
		<mvBar :mysNavConfig="mysNavConfig" @onLeftClick="onLeftClick"></mvBar>
		<!-- 消息提示 -->
		<u-toast ref="uToast"></u-toast>
		<view style="margin: 2% 5%;">
			<u-search v-model="searchvalue" @search="this.getopinionlist()" shape="round" bgColor='#fff'
				borderColor='#c4c6c9' placeholderColor='#c4c6c9' :clearabled="true" :showAction="true" actionText="反馈"
				@custom="gotoopinion" input-align="left">
			</u-search>
		</view>
		<view v-show="!noData" class="opinlistcss" v-for="(item, index) in opinionlist" :key="index">
			<uni-list :border='false'>
				<uni-list-item :title="item.title" :note="item.content" :avatar-circle="true"
					thumb="/static/img/opinion.png" thumb-size="lg" :showArrow="false" clickable
					@click="opinionmassage(item.suggestionRealId)">
					<template v-slot:footer>
						<image class="slot-image" :src="poinionimage(item.replyStatus)" mode="widthFix"></image>
					</template>
				</uni-list-item>
			</uni-list>
		</view>
		<view v-show="noData">
			<view class="header">
				<image mode="aspectFit" src="/static/img/nodata.png" style="width: 320px;
					height: 240px;"></image>
			</view>
			<view class="title">
				<text>您还没有反馈过任何意见。</text>
			</view>
		</view>
		<u-loadmore nomore-text=' ' :status="loadStatus" bgColor="#f2f5f9"></u-loadmore>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mysNavConfig: {
					/* 占位开启  */
					navPadding: true,
					/* 背景 */
					bgColor: "#2979FF",
					/* 标题 （屏幕中心居中 两边图标中心居中使用slot center1） */
					navTitle: {
						text: "我的反馈",
						color: "#ffffff",
						fontSize: "18px", // px upx rpx
						fontWeight: "500", // 100 - 700
					},
					isCustomFn: true,
					btnType: "type2",
					type2Config: {
						// 左图标
						leftPath: "/static/img/back.png",
						// 右图标
						rightPath: "/static/img/home.png",
						// 圆角
						radius: "40rpx",
					}
				},
				userinfo: '',
				searchvalue: '',
				loadStatus: '',
				yema: {
					count: '',
					page: 1,
					limit: 15
				},
				opinionlist: [],
				noData: false,
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');
			uni.showLoading({
				title: "加载中...",
				mask: true,
			});
			uni.request({
				url: getApp().globalData.serverAddress + this.$uri.Uri_lookopinionlist.replace("{userRealId}",
					this.userinfo.userRealId),
				data: {
					page: this.yema.page,
					limit: this.yema.limit
				},
				dataType: "json",
				method: "GET",
				success: (res) => {
					if (res.statusCode !== 200) {
						this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
						return
					}
					if (res.data.code == 0) {
						this.opinionlist = res.data.data
						this.yema.count = res.data.count
						//如果获取的页面个数小于当前页面数的话暂无数据
						if (this.yema.count < this.yema.limit) {
							this.loadStatus = "nomore";
							if (this.opinionlist.length !== 0) {
								this.noData = false;
							} else {
								this.noData = true;
							}
						} else {
							this.loadStatus = "loadmore";
						}
					} else {
						this.$utils.showToast(this, res.data.msg, 'error');
					}
				},
				fail() {
					this.$utils.showToast(this, "加载失败！", 'error');
				},
				complete() {
					uni.hideLoading();
				}
			})
		},
		methods: {
			//获取意见列表
			getopinionlist() {
				uni.showLoading({
					title: "加载中...",
					mask: true,
				});
				uni.request({
					url: getApp().globalData.serverAddress + this.$uri.Uri_lookopinionlist.replace("{userRealId}",
						this.userinfo.userRealId),
					data: {
						page: this.yema.page,
						limit: this.yema.limit,
						content: this.searchvalue
					},
					dataType: "json",
					method: "GET",
					success: (res) => {
						if (res.statusCode !== 200) {
							this.$utils.showToast(this, '服务器错误,请联系技术支持人员!', 'error');
							return
						}
						if (res.data.code == 0) {
							this.opinionlist = res.data.data
							this.yema.count = res.data.count
							//如果获取的页面个数小于当前页面数的话暂无数据
							if (this.yema.count < this.yema.limit) {
								this.loadStatus = "nomore";
							} else {
								this.loadStatus = "loadmore";
							}
						} else {
							this.$utils.showToast(this, res.data.msg, 'error');
						}
					},
					fail() {
						this.$utils.showToast(this, "加载失败！", 'error');
					},
					complete() {
						uni.hideLoading();
					}
				})
			},
			//跳转反馈页面
			gotoopinion() {
				uni.redirectTo({
					url: '/pages/userCenter/feedback'
				})
			},
			//照片处理
			poinionimage(value) {
				if (value == 1) {
					return '/static/img/dai.png';
				} else if (value == 2) {
					return '/static/img/zhong.png';
				} else {
					return '/static/img/yi.png';
				}
			},
			//返回
			onLeftClick() {
				uni.switchTab({
					url: '/pages/tabbar/userCenter'
				})
			},
			//跳转意见详情页
			opinionmassage(value) {
				uni.redirectTo({
					url: "/pages/userCenter/opinion?opinionid=" + value
				})
			},
		},
		//下滑到底部
		onReachBottom() {
			if (this.yema.count < this.yema.limit) {
				this.loadStatus = "nomore";
			} else {
				setTimeout(() => {
					this.loadStatus = "loading";
					this.yema.limit += 10;
					this.getopinionlist();
				}, 1000);
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.yema.limit = 15;
			this.getopinionlist();
			uni.stopPullDownRefresh();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-image {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		width: 50px;
		height: 50px;
		margin-top: 2%;
	}

	.opinlistcss {
		width: 90%;
		margin: 3% auto;
		border-radius: 15px;
		overflow: hidden;
		background-color: #fff;
	}

	.header {
		width: 320px;
		height: 240px;
		margin: 100px auto 0px;
	}

	.title {
		width: 100%;
		font-size: 15px;
		color: #a8a8a8;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0rpx;
		padding: 0px 40px;
	}
</style>